<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>book</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var orderNo = 0;
        var novelId = "62"
       /* var host = "http://127.0.0.1:8080/";//47.52.204.171*/
        var host = "http://47.52.204.171:8080/";//
        $(document).ready(function () {
            loadChapterList(novelId);
        });

        function loadChapter(novelId, no) {
            $.get(host + "book/" + novelId + "/" + no, function (result) {
                $(".title").html(result.title);
                $(".content").html(result.content);
                orderNo = no;
                $(".chapter").show();
                $(".chapter_list").hide();
            });
        }

        function loadChapterList(novelId) {
            $.get(host + "book/" + novelId, function (result) {
                $(".title").html(result.noveName);
                var chapters = result.chapterList;
                var j = 0;
                var listDiv = "";
                for (var i = 0; i < chapters.length; i++) {
                    var alink = "    <div class='chapter_title'> <a onclick=loadChapter(" + novelId + "," + chapters[i].orderNo + ")>" + chapters[i].title + "</a></div>";
                    listDiv += alink;

                    if (j == 3) {
                        j = 0;
                        listDiv += "<br/>"
                    } else j++;

                }
                $(".chapter_list").append(listDiv);
                $(".chapter_list").show();
                $(".chapter").hide();
            });
        }

        function preChapter() {
            var preNo = parseInt(orderNo) - 1;
            loadChapter(novelId, preNo);

        }

        function nextChapter() {
            var preNo = parseInt(orderNo) + 1;
            loadChapter(novelId, preNo);
        }
        function toCatalog() {
            $(".chapter_list").show();
            $(".chapter").hide();
        }
    </script>
    <style type="text/css">
        body {
            padding-bottom: 20px;
            background-color: #E9FAFF;
        }

        .bottom_box {
            position: fixed;
            left: 0%;
            bottom: 0px;
            width: 100%;
            height: 8%;
            z-index: 9999;
        }

        .pre {
            position: fixed;
            left: 5%;
        }

        .catalog {
            position: fixed;
            left: 48%;
        }

        .next {
            position: fixed;
            left: 90%;
        }

        button {
            width: 100px;
        }
        .title {
            position: fixed;
            left: 45%;
            bottom: 95%;
            width: 100%;
            height: 5%;
            z-index: 9999;

        }

        .content {
            border-top: 1px solid #5ecbee;
            position: fixed;
            left: 5px;
            bottom: 10%;
            top: 5%;
            width: 100%;
            height: 86%;
            z-index: 9998;
            overflow-y: auto;!important;

        }

        .chapter {
            display: none;
        }

        .chapter_list {
            border-top: 1px solid #5ecbee;
            position: fixed;
            left: 5px;
            bottom: 5%;
            top: 5%;
            width: 100%;
            height: 95%;
            z-index: 9998;
            overflow-y: auto;
        !important;
            display: none;
        }

        .chapter_title {
            float: left;
            width: 25%;
        }

        a {
            font-size: 16px;
            color: #000;
        }

        a:hover {
            font-size: 16px;
            color: #000;

        }

        .chapter_title a {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div class="title"></div>
<div class="chapter_list"></div>
<div class="content chapter"></div>
<div class="bottom_box chapter">
    <div class="pre">
        <button id="pre" onclick="preChapter()">上一章</button>
    </div>
    <div class="catalog">
        <button id="catalog" onclick="toCatalog()">目录</button>
    </div>
    <div class="next">
        <button id="next" onclick="nextChapter()">下一章</button>
    </div>
</div>


</body>

</html>